<template>
  <page-header-wrapper :title="false">
    <a-spin :spinning="loading">
      <a-card title="组员概况总览">
        <a-tabs :default-active-key="activeKey" @change="onTabs">
          <a-tab-pane key="1" tab="今日"></a-tab-pane>
          <a-tab-pane key="2" tab="当月"></a-tab-pane>
          <a-tab-pane key="3" tab="上月"></a-tab-pane>
        </a-tabs>
        <a-row :gutter="[10,10]">
          <a-col :span="4" v-for="(item,index) in MemberList" :key="item.uid">
            <a-card bordered hoverable :class="item.bg" @click="$router.push({ name: 'MemberDetail', params: { id: item.uid } })">
              <template slot="actions">
                <div>
                  <div>{{item.ztc}}</div>
                  <div>通话次数</div>
                </div>
                <div>
                  <div>{{item.zts}}</div>
                  <div>通话时间</div>
                </div>
                <div>
                  <div>{{item.wx_num}}</div>
                  <div>微信数量</div>
                </div>
              </template>
              <a-card-meta>
                <div slot="title" :style="{ textAlign: 'center' }">
                  <a-avatar :size="80" :src="item.image" />
                  <h2>{{item.username}}</h2>
                  <h5>{{currentTxt}}业绩</h5>
                  <h4>{{item.yj}}</h4>
                </div>
              </a-card-meta>
              <div class="operate" v-if="index == 0"><a-icon theme="filled" :style="{ fontSize: '20px', color: '#fff' }" type="crown" /></div>
            </a-card>
          </a-col>
        </a-row>
      </a-card>
    </a-spin>
  </page-header-wrapper>
</template>

<script>
import { getMemberView } from '@/api/member'

export default {
  name: 'MemberView',
  data () {
    return {
      MemberList: {},
      groupType: {},
      loading: true,
      activeKey: '1',
      queryParam: {},
      currentTxt: '今日'
    }
  },
  created () {
    console.log(1)
    this.queryParam['page_size'] = '200'
    this.queryParam['filter[type]'] = this.activeKey
    this.getMemberList(this.queryParam)
  },
  // activated () {
  //   this.queryParam['page_size'] = '200'
  //   this.queryParam['filter[type]'] = this.activeKey
  //   this.getMemberList(this.queryParam)
  // },
  methods: {
    onTabs (key) {
      this.activeKey = key
      this.queryParam['filter[type]'] = this.activeKey
      if (key === '1') this.currentTxt = '今日'
      if (key === '2') this.currentTxt = '当月'
      if (key === '3') this.currentTxt = '上月'
      this.getMemberList(this.queryParam)
    },
    getMemberList (param) {
      const app = this
      let list = []
      app.loading = true
      getMemberView(param).then(res => {
        const result = res.result.data
        list = result
        app.groupType = res.result.group_type
        for (const k in result) {
          if (result[k].group_type_status === 'tm') {
            list[k].bg = 'bg-blue'
          }
          if (result[k].group_type_status === 'pt') {
            list[k].bg = 'bg-cyan'
          }
          if (result[k].group_type_status === 'sh') {
            list[k].bg = 'bg-vol'
          }
        }
        app.MemberList = res.result.data
      }).finally(() => {
        app.loading = false
      })
    }
  }
}
</script>

<style scoped>
.operate{
  position: absolute;
  left: 0;
  top: 10px;
  width: 40px;
  height: 30px;
  line-height: 30px;
  padding-left: 5px;
  border-radius: 0 50% 50% 0;
  background: #f5a713;
}
.bg-blue {
  background: #67809f;
}
.bg-cyan {
  background: #13c2c2;
}
.bg-vol {
  background: #fa541c;
}
.bg-cyan h2, .bg-cyan h4, .bg-cyan h5 {
  color: #fff;
}
.bg-vol h2, .bg-vol h4, .bg-vol h5 {
  color: #fff;
}
.bg-blue h2, .bg-blue h4, .bg-blue h5 {
  color: #fff;
}
.button-item {
  width: 100%;
  height: 60px;
  line-height: 60px;
}
</style>
